<!-- 弹出选择客户组件 -->
<template name='user_select'>
<view class="width100 flex" >
		<view class="misk-my" v-if="showMisk==true" @click="showMisk=false"></view>
		<view class="top-but-box-my" :style="{margin:isFlex ==true ? '':'auto'}">
			<!-- 搜索 -->
			<view class="width100" style="gap: 10px;" :style="{display:isFlex ==true ? 'flex':'block'}">
				<view class="ipu-box floatleft" 
				id="route" 
				v-if="showRoute==true" 
				:style="isFlex ==true ? '':'width: 100%;margin: 3px 0px;'"
				>
					<view class="riskTitle">搜索线路:</view>
					<view class="input_confirms" style="margin-left: 0px;"> <!-- @click="showMisk=true" -->
						<uni-data-select
						:localdata="$routeData.getRoute()"
						v-model="route.now_id"
						@change="RouteSelectChange"
						placeholder="选择线路"
						placeholder-class="placeholder-class"
						></uni-data-select>
					</view>
				</view>
				<!-- 搜索 -->
				<view class="searchBox floatleft" 
				:style="isFlex ==true ? '':'margin: 3px 0px;'"
				>
					<view class="riskTitle" id="searchUser">搜索用户:</view>
					<input
					:focus="search.focus"
					@blur="blurCla"
					v-model="searchWord" 
					@confirm="$common.noMultipleClicks('fun_firm_user_all',fun_firm_user_all)"
					@input="fun_firm_user_all()"
					class="search-ipu w200"
					placeholder="输入客户档口 人名 手机 拼音进行搜索"
					placeholder-class="placeholder-class"
					id="searchWordId"
					
					@focus="focusCla"
					selection-start="0"
					:selection-end="search.selectEnd"
					/>
					<view class="delete-ipu" v-if="searchWord!=''" @click="searchWord='',showMisk=false,search.focus=true,onclickUser()">
						<img src="../../static/img/delete-1.png"  ></img>
					</view>
				</view>
				
				<button @click="$common.noMultipleClicks('fun_firm_user_all',fun_firm_user_all)" 
				class="rightButttom" 
				v-if="showSearch==true"
				:style="isFlex ==true ? 'margin-right:0px;':'margin: 3px 0px;'"
				>
					<img src="../../static/img/search.png" class="ico"></img>
					刷新
				</button>
			</view>
			
			<!-- 待选数据 -->
			<view class="width100 flex tab-user-my" 
			style="position: flex;"
			:style="margin"
			v-if="user.list.length>0 && showMisk==true"
			>
				<!-- 列表内容 -->
				<view class="boxsss" style="overflow: visible;display: block;">
					<table v-if="user.list.length>0">
						<!-- 表头 -->
						<thead>
							<tr >
								<th style="min-width: 20px;">序</th>
								<th>名称</th>
								<th>开单中</th>
							</tr>
						</thead>
						<tbody>
							<!-- 内容 -->
							<tr v-for="(item,index) in user.list" 
							:key="index"
							@click="onclickUser(item)"
							:class="TabcheckedIndex == index ? 'goods-list-select':''"
							>
								<td >{{index+1}} </td>
								<td class="font14 nowrap relative">
									{{item.name}}
									<view class="back_data">
										
										<image src="/static/img/disabled.png"
										class="ico" v-if="item.disabled!=undefined && item.disabled.status==true"
										:title="$global.title.m36"
										></image>
									</view>
								</td>
								<td v-if="item.caogao.id">
									<view class="flex relative">
										<view class="back_data">
											<image src="/static/img/goods_back.png" 
											:title="$global.title.m16"
											class="ico" v-if="item.caogao.back==0"
											></image>
											
											<image src="/static/img/order_type.png" 
											:title="$global.title.m29" class="ico" 
											v-if="item.caogao.order_status==1"
											></image>
										</view>
										<view>
											{{item.caogao.uid_name + item.caogao.id}}
										</view>
									</view>
								</td>
								<td v-else>
								</td>	
							</tr>
						</tbody>
					</table>
					<!-- 暂无数据 -->
					<empty v-if="user.list.length==0"></empty>
					<!-- end -->
				</view>
				
			</view>
			<!-- 数据列表end -->
			
		</view>
	
</view>
</template>

<script>
	import empty from "@/components/admin-components/empty.vue"
	export default{
		name:'user_select',
		components: {
			empty
		},
		data(){
			return{
				EventListener:false,//是否允许有热键监控
				search:{
					focus:false,
					selectEnd:0
				},
				searchWord:'',
				route:{
					now_id:''
				},
				user:{
					list:[],
					now_id:''
				},
				margin:{
					left:'',//左边线路框的宽度
					width:'',//宽度
					height: '300px',
					position: 'fixed',
				},
				showMisk:false,
				TabcheckedIndex:-1,//当前选中项
				
			}
		},
		 // 此处定义传入的数据
		props: {
			
			/**
			 * 是否并排显示
			*/
			isFlex: {
				type:Boolean,
				default :true
			},
			/**
			 * 是否显示搜索按钮
			*/
			showSearch: {
				type:Boolean,
				default :true
			},
			/**
			 * 是否显示线路选择框
			*/
			showRoute: {
				type:Boolean,
				default :true
			},
			/**
			 * 是否搜索正在开单中
			*/
			showBilling: {
				type:Boolean,
				default :true
			},
			/**
			 * 是否搜索供应商
			*/
			showGongYing: {
				type:Boolean,
				default :false
			},
			/**
			 * 是否强制含有搜索内容
			*/
			isSearchValue: {
				type:Boolean,
				default :true
			},
			
		},
		mounted() {
			var that = this
			//为输入框增加键盘弹起事件处理程序
			this.$el.addEventListener('keyup', ()=>{
				//console.log('键盘弹起', event.key);
			  //,ArrowDown=下；ArrowUp=上;ArrowRight=右
				// 是否允许热键监控
				if(that.EventListener == false){
					return
				}
					
				if(event.key == 'ArrowDown' && that.user.list.length>0 && that.showMisk==true){
					var index = that.TabcheckedIndex
					index++;
					if(index>=that.user.list.length){
						index = 0;
					}
					that.TabcheckedIndex = index
					
				}else if(event.key == 'ArrowUp' && that.user.list.length>0 && that.showMisk==true){
					var index = that.TabcheckedIndex
					index--;
					if(index < 0){
						index = that.user.list.length-1;
					}
					
					that.TabcheckedIndex = index
						
				}else if(event.key == 'ArrowRight' && that.user.list.length>0 && that.showMisk==true){
					
					that.onclickUser( that.user.list[that.TabcheckedIndex])
				}
					
				
			});
		},
	
		created() {
			//console.log("style",this.showStyle)
			 let route = this.$routeData.GetNowRoute()
			 this.route.now_id = route
		},
		beforeUpdate(){
		
			// 移除监听事件
			this.$el.removeEventListener('keyup', ()=>{});
		},
		methods:{
			createSelectorQuery(){
				var that = this
				var left = 0
				const query = uni.createSelectorQuery().in(this);
				query.select('#searchUser').boundingClientRect(data => {
					if(data !=null && data.width){
						that.margin['margin-left'] = (data.width)+'px'////左边线路框的宽度
						left = data.width
					}
				}).exec();
				
				query.select('#route').boundingClientRect(route => {
					if(route !=null && route.width){
						that.margin['margin-left'] = (route.width+left+10)+'px'////左边线路框的宽度
					}
				}).exec();
				
				
				
				query.select('#searchWordId').boundingClientRect(res => {
					if(res !=null && res.width){
						
						that.margin.width = res.width+'px'////左边线路框的宽度
						
						if(that.isFlex == false){
							
							that.margin.left  = (res.left - 10)+'px'////左边线路框的宽度
							
							
							var bottom = res.bottom
							
							var data = uni.getWindowInfo()
							
							var windowHeight = data.windowHeight
							
							if(windowHeight - bottom < 350){
								that.margin.bottom   = (res.height  ) +'px'//(data.height+data.top) +'px'////左边线路框的宽度
							}else{
								that.margin.top   = (res.height) +'px'//(data.height+data.top) +'px'////左边线路框的宽度
							}
						}else{
						
							
							var bottom = res.bottom
							
							var data = uni.getWindowInfo()
							
							var windowHeight = data.windowHeight
							
							if(windowHeight - bottom < 350){
								that.margin.bottom   = (res.height ) +'px'//(data.height+data.top) +'px'////左边线路框的宽度
							}else{
								that.margin.top   = (res.height +res.top) +'px'//(data.height+data.top) +'px'////左边线路框的宽度
							}
						}
					}
				}).exec();
				
			},
			/**
			 * 输入框被失去焦点的回调
			*/
			blurCla(){
				this.search.focus = false
				this.EventListener= false
				this.$emit('sellBlur',{}) //(父组件中触发的事件名，要传的变量名)
			},
			/**
			 * 输入框被注入焦点的回调
			*/
			focusCla(){
				this.search.selectEnd = this.searchWord.length
				this.showMisk      = true
				this.EventListener = true
				this.$emit('sellFocus',{}) //(父组件中触发的事件名，要传的变量名)
				this.createSelectorQuery()
			},
			/**
			 * 线路被选中
			*/
			RouteSelectChange(e){
				this.$routeData.SetNowRoute(e)
				this.$emit('onclickRouteSelect',e) //(父组件中触发的事件名，要传的变量名)
				//置焦点至搜索输入框
				this.search.focus = true;
				
			},
			
			/**
			 * 选中用户后回调 事件
			*/
			onclickUser(item=null){
				if(item!=null ){
					this.searchWord = item.name
					this.showMisk =false
				}else{
					
				}
				
				this.$emit('onclickSelectUser',item) //(父组件中触发的事件名，要传的变量名)
			},

			/**
			 * 用户-读取搜索
			*/
			fun_firm_user_all(){
				var that = this
				//console.log('that.searchWord',that.searchWord)
				if(that.isSearchValue==true && that.searchWord==""){
					//没有输入内容的，则直接回调刷新数据
					that.onclickUser();
					// console.log(that.search.focus)
					that.search.focus = true
					//return
				}
				that.showMisk=true

				that.$common.get_request(
					{
						type:'firm_user_list',
						search:that.searchWord,//搜索内容
						route_id: that.showRoute==false ? '': that.route.now_id,//获取线路下的
						billing: that.showBilling==false ? 0 : 1,//获取开单中
						user_type: that.showGongYing==false ? '':'gys',//供应商
						is_map:1
					},
					(res)=>{
						that.user.list = res.list
						//开始为上下移动做准备
						if(res.list.length>0){
							that.TabcheckedIndex = 0
						}
						//重新置入焦点
						that.search.focus=true
					}
				);
			},
		}
	}
</script>

<style>
	.gys{
		margin-left: 0px;
		padding: 0px 5px;
		background-color: #f5f7fa;
		border-top: 1px solid #d2d2d2;
		border-bottom: 1px solid #d2d2d2;
		border-left: 1px solid #d2d2d2;
		height: 30px;
		flex: 1;
		margin-top: auto;
		margin-bottom: auto;
		width: auto;
	}
	.width100{
		flex:1;
		margin: auto;
	}
	.updateBut{
		margin: auto;
		background-color: #0f66e0;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 32px;
		padding: 0px 5px;
		min-width: 55px;
		cursor: pointer;
		font-weight: 600;
		flex: 2;
	}
</style>
